<template>
	<view class="home-page">
		<!-- 顶部Header -->
		<view class="header-bar" :style="{ paddingTop: statusBarHeight + navBarHeight + 'px' }">
			<view class="page-title">西安善佑家政</view>
			<view class="city-picker" @click="showCitySelector">
				<view class="city-text">
					<image src="/static/image/location.png" style="width: 40rpx;height: 40rpx;margin-right: 12rpx"></image>
					<text>{{ currentCity }}</text>
				</view>
			</view>
			<view class="search-box" @click="toSearch">
				<u-icon name="search" size="18" color="#999" />
				<input class="search-input" placeholder="请输入项目名称" disabled />
			</view>
			<u-icon name="chat" size="26" color="#ff6600" class="msg-btn" />
		</view>

		<!-- Banner轮播 -->
		<view class="banner-swiper">
			<swiper class="swiper" circular :indicator-dots="false" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff" autoplay interval="20000" duration="500">
				<swiper-item v-for="(item, index) in bannerList" :key="index" @click="clickBanner(item)">
					<video v-if="item.image && item.image.match(/\.(mp4|mov|avi|wmv)$/i)"
						:src="item.image"
						class="banner-video"
						object-fit="contain"
						:show-center-play-btn="false"
						:controls="false"
						:loop="true"
						:muted="true"
						:autoplay="true"
					></video>
					<image v-else :src="item.image" class="banner-image" mode="heightFix" />
				</swiper-item>
			</swiper>
		</view>

    <!-- 服务分类2列grid -->
    <view class="service-grid2">
      <view @click="switchTab(item.id)" v-for="(item, idx) in serviceList.slice(0,2)" :key="item.name" class="service-item">
        <image :src="item.image" class="service-icon" mode="heightFix" />
        <text class="service-name">{{ item.name }}</text>
      </view>
    </view>

		<!-- 服务分类2列grid -->
		<view class="service-grid">
			<view @click="switchTab(item.id)" v-for="(item, idx) in serviceList.slice(2)" :key="item.name" class="service-item">
				<image :src="item.image" class="service-icon" mode="heightFix" />
				<text class="service-name">{{ item.name }}</text>
			</view>
		</view>
    <view class="service-grid3">
      <image @click="callPhone" style="width: 100%;" :src="phoneUrl" mode="widthFix"></image>
      <image @click="applyClick" :src="applyUrl" style="width: 100%;margin-top: 20rpx" mode="widthFix"></image>
    </view>
		<!-- 推荐阿姨卡片横滑区域 -->
		<view class="recommend-title">推荐阿姨</view>
		<scroll-view class="recommend-scroll" scroll-x>
			<view class="recommend-list">
				<view class="recommend-card" v-for="item in recommendAyiList" :key="item.id" @click="toUrl('/pages/partner/detail?id=' + item.id)">
					<image :src="item.avatar" class="recommend-avatar" />
					<view class="recommend-info">
						<view class="recommend-name">{{ item.name }}</view>
						<view class="recommend-count">服务 {{ item.orderGoods.length }} 次</view>
						<view class="recommend-desc">{{ item.description }}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 推荐项目区域 -->
		<view class="project-section">
			<view class="project-header">
				<text class="project-title">超值服务</text>
				<text class="project-badge">五星级家政</text>
			</view>
			<view class="project-list">
				<view class="project-card" v-for="item in projectList" :key="item.id" @click="toUrl('/pages/project/project?projectId=' + item.id)">
					<image :src="item.image" class="project-img" mode="heightFix" />
					<view class="project-info">
						<view class="project-name">{{ item.name }}</view>
						<view class="project-desc">{{ item.desc }}</view>
						<view class="project-price-row">
							<text class="project-price">￥{{ item.label_price || item.price }}<span class="project-unit">/{{ item.unit }}</span></text>
<!--							<text class="project-old-price">原价:￥{{ item.oldPrice }}</text>-->
						</view>
					</view>
				</view>
			</view>
		</view>

    <!-- 城市选择弹窗 -->
    <u-popup v-model="showCityPopup" mode="bottom" @close="showCityPopup = false" round="10">
      <view class="city-popup">
        <view class="city-popup-header">
          <text class="city-popup-title">选择城市</text>
          <u-icon name="close" size="20" @click="showCityPopup = false"></u-icon>
        </view>
        <scroll-view class="city-list" scroll-y>
          <view
              class="city-item"
              v-for="(item, index) in cityList"
              :key="index"
              :class="{ active: currentCity === item }"
              @click="selectCity(item, index)"
          >
            {{ item }}
          </view>
        </scroll-view>
      </view>
    </u-popup>
	</view>

</template>

<script>

export default {
	data() {
		return {
			cityList: [],
			currentCity: '',
			currentCityIndex: 0,
			showCityPopup: false,
			bannerList: [],
			serviceList: [
			],
			recommendAyiList: [],
      projectList: [],
			tabbarCurrent: 0,

      navBarHeight: 0,
      statusBarHeight: 0,
      phoneUrl: 'https://shanyoujiazheng.oss-cn-chengdu.aliyuncs.com/uploads/1750234871870-d97dd79f-8f30-42cd-8abd-7f0a06d43271.png',
      applyUrl: 'https://shanyoujiazheng.oss-cn-chengdu.aliyuncs.com/uploads/1750234900196-db42fcf4-a52d-4493-918e-9056f0b49991.png'
		}
	},
	watch: {
		currentCity: {
			handler(newCity) {
				if (newCity) {
					// 加载推荐阿姨
					this.$http.getTechnicianList({
					}).then(res => {
						this.recommendAyiList = res
					})
					// 加载推荐项目
					this.$http.getProjectList({
						sort: 'desc',
					}).then(res => {
						this.projectList = res.map(item => {
							return {
								...item,
								image: item.image,
								sale_count: item.sale_count || item.orderDetails.length
							}
						})
					})
				}
			},
		}
	},
	onLoad() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2
    // #endif
    // #ifdef H5
    this.navBarHeight = 44
    // #endif

    // 获取城市列表
    this.$http.getCityList().then(res => {
      this.cityList = res.map(item => item.name)
      // 获取定位城市
      this.getLocationCity()
    })

		// 动态获取banner
		this.$http.getBannerList({
      type: 'home'
    }).then(res => {
			if (Array.isArray(res)) {
				this.bannerList = res
			}
		})
		this.$http.getCategoryList().then(res => {
			this.serviceList = res
		})
	},
	methods: {
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: '4000299997',
        success() {
          console.log('拨打电话成功');
        },
        fail(error) {
          console.error('拨打电话失败', error);
        }
      });
    },
    applyClick() {
      const userInfo = uni.getStorageSync('userInfo') || {}
      if (!userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }
      uni.navigateTo({
        url: '/pages/partner/apply'
      })
    },
    // 显示城市选择器
    showCitySelector() {
      this.showCityPopup = true
    },
    // 选择城市
    selectCity(city, index) {
      this.currentCity = city
      this.currentCityIndex = index
      this.showCityPopup = false
    },
    // 获取定位城市
    getLocationCity() {
      const that = this
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          const { latitude, longitude } = res
          // 使用腾讯地图逆地址解析获取城市信息
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=AE3BZ-SVQKU-BHUVT-GNGMH-QVJKK-2PFRJ&get_poi=0`,
            success: (result) => {
              if (result.data.status === 0) {
                let city = result.data.result.address_component.city.replace('市', '')
                // 查找城市列表中是否存在该城市
                const index = that.cityList.findIndex(item => item.includes(city))
                if (index !== -1) {
                  that.currentCity = that.cityList[index]
                  that.currentCityIndex = index
                } else {
                  // 如果找不到对应城市，显示提示并打开选择器
                  uni.showToast({
                    title: '当前城市暂未开通服务',
                    icon: 'none',
                    duration: 2000
                  })
                  // 延迟打开选择器，让用户看到提示
                  setTimeout(() => {
                    that.showCityPopup = true
                  }, 500)
                }
              }
            },
            fail: () => {
              // 定位失败时打开选择器
              uni.showToast({
                title: '定位失败，请选择城市',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                that.showCityPopup = true
              }, 500)
            }
          })
        },
        fail: () => {
          // 定位失败时打开选择器
          uni.showToast({
            title: '定位失败，请选择城市',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            that.showCityPopup = true
          }, 500)
        }
      })
    },
    switchTab(id) {
      uni.setStorageSync('categoryId', id)
      uni.switchTab({
        url: '/pages/category/category'
      })
    },
    clickBanner(item) {
      uni.navigateTo({
        url: '/pages/index/banner?id=' + item.id
      })
    },
    toSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    }
	},
}
</script>

<style lang="less" scoped>
pages {
	height: 100%;
	overflow: hidden;
	background: rgba(246, 246, 246, 1);
}
.home-page {
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
}
.header-bar {
	display: flex;
	align-items: center;
	padding: 60rpx 24rpx 40rpx 24rpx;
	background: #ff6600;
	border-bottom-left-radius: 32rpx;
	border-bottom-right-radius: 32rpx;
	position: relative;
}
.page-title {
	position: absolute;
	left: 24rpx;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 34rpx;
	font-weight: bold;
  width: 100%;
  text-align: center;
}
.city-picker {
	flex-shrink: 0;
}
.city-text {
	color: #fff;
	font-size: 30rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	margin-right:12rpx;
}
.search-box {
	flex: 1;
	background: #fff;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	margin-right: 16rpx;
	height: 56rpx;
}
.search-input {
	border: none;
	outline: none;
	background: transparent;
	flex: 1;
	font-size: 26rpx;
	margin-left: 8rpx;
}
.msg-btn {
	flex-shrink: 0;
}
.banner-swiper {
	position: relative;
	margin: 32rpx 24rpx 0 24rpx;
	border-radius: 16rpx;
	overflow: hidden;
}
.swiper {
	width: 100%;
	height: 350rpx;
}
.banner-image, .banner-video {
	width: 100%;
	height: 100%;
	border-radius: 16rpx;
}
.banner-content {
	position: absolute;
	left: 40rpx;
	top: 40rpx;
	color: #fff;
}
.banner-title {
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}
.banner-desc {
	font-size: 26rpx;
	margin-bottom: 16rpx;
}
.banner-btn {
	border-radius: 32rpx;
	font-size: 24rpx;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16rpx 16rpx;
  background: #fff;
  margin: 12rpx 24rpx 0 24rpx;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx #f0f0f0;
  padding: 24rpx 12rpx 0 12rpx;
  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24rpx;
  }
  .service-icon {
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 8rpx;
  }
  .service-name {
    font-size: 24rpx;
    color: #333;
  }
}
.service-grid3 {
	 margin: 32rpx 24rpx 0 24rpx;
}
.service-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx 16rpx;
  margin: 32rpx 24rpx 0 24rpx;
  .service-item {
    height: 120rpx;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;
    // 渐变色
    background: linear-gradient(90deg, #ff6600 60%, #ffd700 100%);
  }
  .service-icon {
    width: 64rpx;
    height: 64rpx;
    margin-right: 8rpx;
  }
  .service-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
  }
}
.vip-banner {
	position: relative;
	margin: 32rpx 24rpx 0 24rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background: linear-gradient(90deg, #ff6600 60%, #ffd700 100%);
	height: 100rpx;
	display: flex;
	align-items: center;
}
.vip-img {
	width: 120rpx;
	height: 100rpx;
}
.vip-content {
	display: flex;
	align-items: center;
	margin-left: 24rpx;
}
.vip-text {
	color: #fff;
	font-size: 30rpx;
	font-weight: bold;
	margin-right: 24rpx;
}
.vip-btn {
	border-radius: 32rpx;
	font-size: 24rpx;
}
.service-entry {
	display: flex;
	justify-content: space-between;
	margin: 32rpx 24rpx 0 24rpx;
}
.entry-card {
	flex: 1;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 2rpx 8rpx #f0f0f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 24rpx;
	padding: 24rpx 0;
	position: relative;
	.bg-img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}
.entry-card:last-child {
	margin-right: 0;
}
.entry-img {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 12rpx;
}
.entry-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 12rpx;
}
.entry-btn {
	border-radius: 32rpx;
	font-size: 24rpx;
}
.recommend-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #222;
	margin: 32rpx 24rpx 24rpx 24rpx;
}
.recommend-scroll {
	width: 100vw;
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: 12rpx;
}
.recommend-list {
	display: flex;
	flex-direction: row;
	padding-left: 24rpx;
	min-width: 100vw;
}
.recommend-card {
	width: 220rpx;
	min-width: 220rpx;
	background: #fff;
	border-radius: 18rpx;
	box-shadow: 0 2rpx 8rpx #f0f0f0;
	margin-right: 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	padding: 24rpx 0 16rpx 0;
}
.recommend-avatar {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	margin-bottom: 12rpx;
  flex-shrink: 0;
}
.recommend-info {
	text-align: center;
}
.recommend-name {
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 4rpx;
}
.recommend-count {
	font-size: 22rpx;
	color: #888;
	margin-bottom: 8rpx;
}
.recommend-desc {
	font-size: 22rpx;
	color: #666;
	word-break: break-all;
	white-space: normal;
  width: 100%;
	text-align: left;
	padding: 0 20rpx;
  // 四行省略号
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.project-section {
	margin: 0rpx 12rpx 0 12rpx;
	border-radius: 18rpx;
	box-shadow: 0 2rpx 8rpx #f0f0f0;
	padding: 24rpx 0 12rpx 0;
}
.project-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24rpx 12rpx 24rpx;
}
.project-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #222;
}
.project-badge {
	font-size: 20rpx;
	color: #ff9900;
	background: #fff3e0;
	border-radius: 8rpx;
	padding: 4rpx 12rpx;
	margin-left: 12rpx;
}
.project-more {
	font-size: 22rpx;
	color: #999;
	margin-left: auto;
}
.project-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0rpx 16rpx;
	padding: 0 24rpx;
}
.project-card {
	background: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.project-img {
	width: 100%;
	height: 240rpx;
  text-align: center;
  margin: 12rpx auto;
}
.project-info {
	padding: 12rpx 12rpx 8rpx 12rpx;
}
.project-name {
	font-size: 24rpx;
	font-weight: bold;
	color: #222;
	margin-bottom: 4rpx;
}
.project-desc {
	font-size: 20rpx;
	color: #888;
	margin-bottom: 8rpx;
}
.project-price-row {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 12rpx;
}
.project-price {
	font-size: 26rpx;
	color: #ff6600;
	font-weight: bold;
}
.project-unit {
	font-size: 18rpx;
	color: #ff6600;
	margin-left: 2rpx;
}
.project-old-price {
	font-size: 18rpx;
	color: #bbb;
	text-decoration: line-through;
}
.city-popup {
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding-bottom: env(safe-area-inset-bottom);

	.city-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;

		.city-popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.city-list {
		height: 600rpx;
		padding: 0 30rpx;

		.city-item {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #333;
			border-bottom: 1rpx solid #f5f5f5;

			&.active {
				color: #ff6600;
				font-weight: bold;
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}
}
</style>
